<template>
<div class="table-w">
            <div class="title-div">
                <span>裁片任务</span>
                <div>
                <el-button type="primary" @click="$router.push({path:'/tool/calc'})">点料</el-button>
                <el-button type="primary" @click="$router.push({path:'/tool/validity'})">校称</el-button>
                <el-button type="primary" @click="$router.push({path:'/tool/calcTrans'})">重量长度计算</el-button>
                </div>
            </div>
            <el-table
            :data="taskList"
            :row-style="tableRowStyle"
            :header-cell-style="tableHeaderColor"
            highlight-current-row
            style="width: 100%;font-size:26px;"
            height="880px"
            >
            <el-table-column prop="TaskRegisterID" label="裁单号" width="160" align="center"></el-table-column>
            <el-table-column prop="CuttingOrgName" label="厂别" width="120" align="center"></el-table-column>
            <el-table-column prop="ProductLineName" label="生产线" width="120" align="center"></el-table-column>
            <el-table-column prop="CustomerName" label="厂家" width="180" align="center"></el-table-column>
            <el-table-column prop="StyleName" label="款式" width="160" align="center"></el-table-column>
            <el-table-column prop="CuttingCount" label="要求套数" width="160" align="center"></el-table-column>
            <el-table-column prop="CompletCount" label="已完成" width="160" align="center"></el-table-column>
            <el-table-column prop="TaskDetail" label="配比要求" align="center"></el-table-column>
            <el-table-column prop="CuttingDate" label="裁剪日期" align="center" width="120">
                <template
                slot-scope="scope"
                >{{$moment(scope.row.CuttingDate).format('YYYY-MM-DD')}}</template>
            </el-table-column>
            <el-table-column prop="StatusName" label="状态" width="120" align="center">
                <template slot-scope="scope">
                <div
                    style="color:#409EFF"
                    v-if="scope.row.Status==164001"
                >{{scope.row.StatusName}}</div>
                <div style="color:#fff" v-if="scope.row.Status==164002">{{scope.row.StatusName}}</div>
                <div style="color:#999" v-if="scope.row.Status==164003">{{scope.row.StatusName}}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="160" align="center">
                <template slot-scope="scope">
                <el-button
                    type="primary"
                    v-if="scope.row.Status == 164001 || scope.row.Status == 164002"
                    @click="$router.push({path:'/tailoring/process',query:{tab:1,taskFlnkID:scope.row.FlnkID}})"
                >执行</el-button>
                <el-button
                    type="primary"
                    v-if="scope.row.Status == 164003"
                    @click="$router.push({path:'/tailoring/process',query:{tab:3,taskFlnkID:scope.row.FlnkID}})"
                >查看</el-button>
                </template>
            </el-table-column>
            </el-table>
        </div>
</template>
<script>
import {getTailoringTaskList} from '@/api/common' // 接口
export default {
  name: 'tailoring',
  data () {
    return {
      taskList: [],
      tailoringTask: null
    }
  },
  methods: {
      // 修改table tr行的背景色
    tableRowStyle ({ row, rowIndex }) {
      return {
        backgroundColor: 'rgb(0, 63, 140)',
        color: '#fff',
        fontWeight: 'bold',
        height: '0.7rem',
        fontSize: '15px'
      }
    },
    // 修改table header的背景色
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: rgb(0, 63, 140);color: #fff;font-weight: bold;height:0.7rem;font-size:15px'
      }
    },
      // 任务单-根据不同裁裁剪任务列表
    getTailoringTaskList () {
      let vm = this
      let params = new FormData()
      params.append('OrgID', vm.getLocalStorage('OrgID'))
      params.append('CuttingBedFlnkID', vm.getLocalStorage('ProductLineFlnkID'))
      getTailoringTaskList(params).then((response) => {
        if (response.data.result) {
          vm.taskList = response.data.data
        }
      })
    }
  },
  mounted () {
    this.getTailoringTaskList()
    let vm = this
    if (vm.tailoringTask === null) {
      vm.tailoringTask = setInterval(
            function () {
              vm.getTailoringTaskList()
            }, 5000
        )
    }
  },
  beforeDestroy: function () {
    let vm = this
    if (vm.tailoringTask !== null) {
      clearInterval(vm.tailoringTask)
      vm.tailoringTask = null
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/css/tailoring/index.scss";
</style>